<script>
import { SET_TOKEN, LOGOUT, SET_LAST_TEST_MESSAGE } from "@/common/index/config/Event.js"
import { canLoginUser, login, logout, getLastTestMessage } from "@/api/index/api.js"
import { showToast } from "../common/index/utils/toast.js"
/**
 * 登录页面
 */
export default {
  data () {
    return {
      username: "",
      phone: "",
      phoneVersion: 0,
      names: null,
      loadData: null,
      shop_id: null
    }
  },
  created () {
    if (this.$store.state.token) {
      logout()
      this.$store.commit(LOGOUT)
    }
  },
  methods: {
    verification () {
      if (!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone))) {
        showToast("", "手机格式错误")
        return false
      }
      if (this.username.trim() == "") {
        showToast("", "学生姓名为空")
        return false
      }
      if (this.username.trim().lenth > 200) {
        showToast("", "学生姓名长度过大")
        return false
      }

      return true
    },
    login () {
      if (!this.verification()) {
        return
      }
      const shop_id = this.shop_id
      if (shop_id == null) {
        setTimeout(() => {
          showToast("登录失败", "认证失败")
        }, 200)
        return
      }
      login(this.phone, this.username.trim(), shop_id).then(res => {
        if (res.statusCode == 200) {
          this.$store.commit(SET_TOKEN, res.data.data.access_token)
          getLastTestMessage()
            .then(result => {
              if (result.statusCode == 200) {
                this.$store.commit(SET_LAST_TEST_MESSAGE, result.data.data)
                uni.redirectTo({ url: '/pages/main/main' })
              } else {
                showToast("获取信息失败", result.data.message)
              }
            })
        } else if (res.statusCode == 500) {
          showToast("登录失败", res.data.message)
        }
      })
    },
    setName (name, shop_id) {
      this.username = name
      this.shop_id = shop_id
    },
    clear () {
      this.username = ""
      this.shop_id = null
    },
    clearLoadData () {
      this.loadData = null
      this.clear()
    }
  },
  watch: {
    phone (newValue) {
      this.clearLoadData()
      this.names = []
      const verson = ++this.phoneVersion
      if ((/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(newValue))) {
        canLoginUser(this.phone)
          .then(res => {
            if (res.data.code == 200 && verson == this.phoneVersion) {
              this.names = res.data.data.map(item => item.name)
              this.loadData = res.data.data
            }
          })
      }
    }
  },
  computed: {
    showTips () {
      return this.loadData && this.loadData.length > 0 && this.username == ''
    }
  }
}
</script>

<template>
  <view>
    <view class="login-title">视立明检测信息录入检测</view>
    <view class="login-box">
      <view class="login-input">
        <label for="phone">手机号码</label>
        <input v-model="phone" name="phone" type="tel" />
      </view>
      <view class="pop"></view>
      <view class="login-input">
        <label for="username">学生姓名</label>
        <input disabled v-model="username" name="username" type="text" />
        <view v-show="username != ''" @click="clear" class="clear-button">
          <div class="center">X</div>
        </view>
        <view v-show="showTips" class="tips">
          <view
            class="tips-item"
            v-for="(item, index) in loadData"
            @click="setName(item.name, item.shop_id)"
            :key="index"
          >
            <view class="item-left">
              {{ item.name }}
            </view>
            <view class="item-right">
              {{ item.shop_name }}
            </view>
          </view>
        </view>
      </view>
      <view class="pop"></view>
      <button @click="login" class="login-box-button">登录检测</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-title {
  padding-top: 35vw;
  line-height: 7vw;
  color: rgba(16, 16, 16, 1);
  font-size: 4.8vw;
  text-align: center;
  font-family: SourceHanSansSC-regular;
}

.scan {
  position: absolute;
  right: 24px;
  top: 29px;
  max-width: 25vw;
  max-height: 25vw;
  width: 209px;
  height: 209px;
  background-color: rgba(16, 16, 16, 1);
}

.scan-span {
  display: block;
  bottom: -100%;
  width: 100%;
  height: 52px;
  color: rgba(16, 16, 16, 1);
  font-size: 36px;
  text-align: center;
  font-family: SourceHanSansSC-regular;
}

.login-box {
  width: 65vw;
  height: 40vw;
  /* border: 2px dashed #999; */
  margin: 0 auto;
  margin-top: 125px;
}
.login-input {
  position: relative;
  height: 7vw;

  label {
    display: block;
    padding: 1vw;
    width: 15.2vw;
    height: 7vw;
    color: rgba(16, 16, 16, 1);
    font-size: 2.8vw;
    text-align: left;
    float: left;
    font-family: SourceHanSansSC-regular;
  }

  input {
    display: block;
    float: left;
    font-size: 4vw;
    margin-left: 4vw;
    width: 40vw;
    height: 7vw;
    line-height: 2vw;
    padding-left: 1vw;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(187, 187, 187, 1);
  }

  .tips {
    width: 40vw;
    height: 21vw;
    position: absolute;
    left: 30%;
    top: 110%;
    z-index: 3;
    font-size: 4vw;
    overflow: auto;
    border: 1px dashed #999;

    .tips-item {
      height: 5vw;
      border: 1px solid rgba(187, 187, 187, 1);
      background: #cecdcd46;
      font-size: 3vw;
      border-radius: 1vw;
      margin: 1vw 2vw;
      padding-left: 2vw;
      overflow: hidden;
      cursor: pointer;

      .item-left {
        float: left;
      }

      .item-right {
        float: right;
        margin-right: 1vw;
      }
    }
  }
  .clear-button {
    position: absolute;
    right: 10%;
    top: 50%;
    height: 5vw;
    width: 5vw;
    transform: translate(0, -50%);
    border: 0.1vw solid #999;
    border-radius: 50%;
    font-size: 2vw;
    overflow: hidden;
    background-color: #dbdada;

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.login-box-button {
  margin: 1vw;
  width: 70vw;
  margin-top: 8vw;
  height: 7vw;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 2.8vw;
  margin-top: 20vw;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 1);
}

.pop {
  height: 10vw;
  clear: both;
}
</style>
